<template>
  <div class="search-box">
    <div class="row">
      <div class="left">
        <el-icon>
          <Search />
        </el-icon>
        <span>筛选搜索</span>
      </div>
      <div class="right">
        <el-button @click="
          queryParams.keyword = '';
        queryUserList();
        ">重置</el-button>
        <el-button type="primary" @click="queryUserList">查询搜索</el-button>
      </div>
    </div>
    <div class="row">
      <span>账号/姓名:</span>
      <el-input placeholder="请输入角色名称" v-model="queryParams.keyword"></el-input>
    </div>
  </div>
  <div class="add-area">
    <div class="add-icon">
      <el-icon>
        <Tickets />
      </el-icon>数据列表
    </div>

    <el-button type="primary" v-permission="'addUser'" @click="editUser(form)">添加</el-button>
  </div>
  <el-table :data="userList" border table-layout="auto" cell-class-name="align-c">
    <el-table-column label="编号" prop="id" />
    <el-table-column label="角色名称" prop="name" />
    <el-table-column label="描述" prop="description" />
    <el-table-column label="用户数" prop="adminCount" />
    <el-table-column label="添加时间" prop="createTime">
      <template #default="{ row }">
        <span>{{ formateDate(row.createTime) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="是否启用" prop="loginTime">
      <template #default="{ row }">
        <el-Switch v-model="row.status" :active-value="1" :inactive-value="0" />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button text type="primary" v-permission="'allocRole'" @click="allocMenu(row.id)">分配菜单
        </el-button>
        <el-button text type="primary" v-permission="'allocResource'"
          @click="router.push('/ums/allocResource?id=' + row.id)">分配资源</el-button>
        <el-button text type="primary" v-permission="'editUser'" @click="editUser(row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <ElConfigProvider :locale="zhCn">
    <div class="page">
      <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="queryUserList" @current-change="queryUserList" />
    </div>
  </ElConfigProvider>
  <addEditRole :show="showDialog" @hide="closeDialog" :form="form" />
</template>
<script setup lang="ts">
import { Tickets, Search } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { jueSeListApi } from "./api";
// 封装好的封装时间
import { formateDate } from "@/utils";
// 国际化中文
import { ElConfigProvider, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import addEditRole from "./addEditRole.vue";
import { useRouter } from "vue-router";
// 跳转到分配菜单页面
const router = useRouter();
const allocMenu = (id: number) => {
  router.push("/ums/allocMenu?id=" + id);
};
// 点击编辑传入改id
const editUser = (myform: object) => {
  // 传入子组件的id值
  Object.assign(form, myform);
  // 把userEdit 显示出来
  showDialog.value = true;
};
// 传入子组件的form内容
const form = reactive<RootModel>({
  // 用户数
  adminCount: 0,
  //   当前时间
  createTime: "",
  //   描述
  description: "",
  id: 0,
  //   角色名字
  name: "",
  sort: 0,
  //   是否启用  1代表启用 0代表不启用
  status: 1,
});

// 控制添加编辑角色框的显示与隐藏
const showDialog = ref(false);
// 关闭添加编辑用户框的再次请求数据
const closeDialog = (isReload?: boolean) => {
  showDialog.value = false;
  form.adminCount = 0;
  //   当前时间
  form.createTime = "";
  //   描述
  form.description = "";
  form.id = 0;
  //   角色名字
  form.name = "";
  form.sort = 0;
  //   是否启用  1代表启用 0代表不启用
  form.status = 1;
  if (isReload) queryUserList();
};
const queryParams = reactive<IUserListParams>({
  keyword: "",
  pageNum: 1,
  pageSize: 10,
});
// 列表数据
const userList = ref<RootModel[]>([]);
// 查询的api的事件
const queryUserList = () => {
  jueSeListApi(queryParams).then((res) => {
    if (res.code === 200) {
      userList.value = res.data.list;
      total.value = res.data.total;
    }
  });
};
//
queryUserList();
// 分页器的总共条数
const total = ref(0);
</script>
<style lang="less" scoped>
// 查询的那一栏的样式
.search-box {
  box-shadow: 0 0 4px #ccc;
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;

  .row {
    padding: 20px 0;
    display: flex;

    &:first-child {
      justify-content: space-between;
      align-items: center;
    }

    &:last-child {
      width: 400px;
      align-items: center;

      span {
        width: 100px;
      }
    }
  }
}

//
// 添加那一栏的样式
.add-area {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: center;
  box-shadow: 0 0 4px #ccc;
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;

  .add-icon {
    display: flex;
    align-items: center;

    :deep(.el-icon) {
      margin-right: 10px;
    }
  }
}

//
// 控制列表居中
:deep(.align-c) {
  .cell {
    text-align: center !important;
  }
}

:deep(.cell) {
  text-align: center !important;
}

//
// 控制分页器样式
.page {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}

//
</style>
